<template>
  <div class="con" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script setup="props">
import { defineProps, onUpdated } from "vue";
import BScroll from "better-scroll";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
//导入
//使用
const ctx = getCurrentInstance();
const props = defineProps({
  pullUpLoad: {
    type: Boolean,
    default: false,
  },
  pullDownRefresh: {
    type: Boolean,
    default: false,
  },
});
const wrapper = ref();
const state = reactive({
  bs: null,
});
const initScroll = () => {
  state.bs = new BScroll(wrapper.value, {
    click: true, //开启点击事件
    probeType: 3,
    mouseWheel: true,
    pullUpLoad: props.pullUpLoad, //上拉刷新
    pullDownRefresh:props.pullDownRefresh,//下拉更新
    // pullUpLoad: {
    //   threshold: 50,
    // },
    // pullDownRefresh: {
    //   threshold: 60,
    //   stop: 40,
    // },
  });

  // 上拉加载更多
  state.bs.on("pullingUp", () => {
    ctx.emit("pullingUp");
  });
  // 下拉刷新事件
  state.bs.on("pullingDown", () => {
    ctx.emit("pullingDown");
    console.log('触底了');
  });
  state.bs.refresh();
};
const refresh = () => {
  state.bs && state.bs.refresh && state.bs.refresh();
};
const finishPullUp = () => {
  state.bs && state.bs.finishPullUp && state.bs.finishPullUp();
};
// 放出实例
const scrolls = () => {
  ctx.emit("scrolls", state.bs);
};

onMounted(() => {
  initScroll();
  refresh();
  finishPullUp();
  scrolls();
});
</script>

<style scoped>
</style>